<template>
  <section class="settlement-wrapper">
    <div class="checkbox-wrapper">
      <div class="all-selection">
        <CheckedAll
          :setIsCheckedAll="setIsCheckedAll"
          :isCheckedAll="isCheckedAll"
        />
      </div>
      <div @click="removeAllGoods" class="all-delete">删除</div>
    </div>
    <div class="total-goods">已选商品<span class="goodsNum">{{ getCheckedGoodsNum }}</span>件</div>
    <div class="settlement">
      <div class="total-money">合计：<span class="money">￥{{ getTotalPrice === 0 ? '0.00' : getTotalPrice }}</span></div>
      <div :class="getCheckedGoodsNum === 0 ? 'dis-btn' : 'enable-btn'" class="btn"
        @click="(e) => handleSubmit(e, removeAllGoods, getTotalPrice)"
      >结算
      </div>
    </div>
  </section>
</template>

<script>
import CheckedAll from './CheckedAll'
export default {
  name: 'Settlement',
  components: {
    'CheckedAll': CheckedAll
  },
  methods: {
    handleSubmit (e, callback, totalPrice) {
      if (e.target.classList.contains('enable-btn')) {
        this.sendGoods(function () {
          // 这是请求成功之后的回调
          callback()
          alert(`结算完毕！一共花了 ${totalPrice} 元！`)
        })
      }
    }
  },
  props: {
    'isCheckedAll': {
      type: Boolean,
      required: true
    },
    'setIsCheckedAll': {
      type: Function,
      required: true
    },
    'removeAllGoods': {
      type: Function,
      required: true
    },
    'getCheckedGoodsNum': {
      type: Number,
      required: true
    },
    'getTotalPrice': {
      type: Number,
      required: true
    },
    'sendGoods': {
      type: Function,
      required: true
    }
  }
}
</script>

<style lang='scss'>
  .settlement-wrapper{
    margin-top: 20px;
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: space-between;
    background-color: #e5e5e5;
    & > div{
      display: flex;
      flex-grow: 1;
    }
    .total-goods{
      align-items: center;
      font-size: 15px;
      .goodsNum{
        color: #f22;
        padding: 0 2px;
        font-weight: 600;
        font-size: 18px;
      }
    }
    .checkbox-wrapper{
      .all-delete{
        margin-left: 20px;
        &:hover{
          text-decoration-line: underline;
          cursor: pointer;
        }
      }
    }
    .settlement{
      height: 100%;
      align-items: center;
      justify-content: space-between;
      .total-money{
        .money{
          font-weight: 600;
          font-size: 18px;
          color: #f22;
        }
      }
      .btn{
        height: 100%;
        padding: 0 30px;
        display: flex;
        color: white;
        font-weight: 600;
        align-items: center;
      }
      .dis-btn{
        background-color: gray;
        cursor: not-allowed;
      }
      .enable-btn{
        cursor: pointer;
        background-color: #f22;
      }
    }
  }
</style>
